<template>
  <a-modal
    :width="modelWidth"
    :visible="visible"
    :okText="titleList[model]"
    cancelText="取消"
    :destroy-on-close="true"
    @ok="submit"
    @cancel="handelColse"
  >
    <div>
      <div class="model_title">
        {{ titleList[model] }}
      </div>
      <a-form >
        <a-row >
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">api名称：</div>
              <a-input class="form_input" :value="form.name" :default-value="form.name" v-model="form.name" placeholder="请输入部门名称" />
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">请求地址：</div>
              <a-input class="form_input" :value="form.url" :default-value="form.url" v-model="form.url" placeholder="请输入部门名称" />
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">请求方式：</div>
              <a-select
                show-search
                :value="form.method"
                style="width: 60%;"
                :show-arrow="false"
                :not-found-content="null"
                @change="handleChange"
              >
                <a-select-option style="border-radius: 0" :value="d.value" v-for="d in serchClickList" :key="d.value">
                  {{ d.title }}
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">父极：</div>
              <a-select
                show-search
                placeholder="请选择上级路由"
                :default-value="form.parentId"
                style="width: 60%"
                :show-arrow="false"
                :not-found-content="null"
                @change="handleParentChange"
              >
                <a-select-option v-for="(item,index ) in tabledata" :value="item.id" :key="index">
                  <span style="float: left">{{ item.name }}</span>
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">状态：</div>
              <a-switch v-model="form.status" :value="form.status"></a-switch>
            </div>
          </a-col>
          <a-col :span="24">
            <div class="form_item">
              <div class="form_title">api备注：</div>
              <a-input
                class="form_textarea"
                v-model="form.describe"
                :default-value="form.describe"
                :value="form.describe"
                type="textarea"
                placeholder="请输入名称" />
            </div>
          </a-col>
        </a-row>

      </a-form>
    </div>
  </a-modal>
</template>

<script>
import { getRuleList, addRule, settingRule } from '@/api/auth'
import IconSelector from '@/components/IconSelector'
const serchClickList = [
  {
    title: 'get',
    value: 'get'
  },
  {
    title: 'post',
    value: 'post'
  },
  {
    title: 'put',
    value: 'put'
  },
  {
    title: 'delete',
    value: 'delete'
  }
]
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    model: {
      type: Number,
      default: () => 0
    },
    formData: {
      type: [String, Object],
      default: () => {}
    }
  },
  data () {
    return {
      titleList: ['新建', '编辑'],
      form: {
        id: 0,
        name: '',
        describe: '',
        method: '',
        status: true,
        parentId: 0
      },
    serchClickList,
      tabledata: [],
      modelWidth: this.$store.getters.modelWidth
    }
  },
  components: {
    IconSelector
  },
  created () {
    this.getAuthListInit()
  },
  methods: {
    setData (val) {
      this.form.id = val.id
      this.form.name = val.name
      this.form.describe = val.describe
      this.form.url = val.url
      this.form.method = val.method
      this.form.parentId = val.parentId
      if (val.status === 0) {
        this.form.status = true
      } else {
        this.form.status = false
      }
    },
    getAuthListInit () {
      getRuleList({
        page: 1,
        pageSize: 10
      }).then(res => {
        if (res.code === 200) {
          const tablist = []
          if (res.data.list.length > 0) {
            for (var i in res.data.list) {
              tablist.push({
                name: res.data.list[i].name,
                id: res.data.list[i].id
              })
            }
          }
          this.tabledata = tablist
        }
      })
    },
    handelColse () {
      this.form = {
          id: 0,
          name: '',
          describe: '',
          method: '',
          status: true,
          parentId: 0
      }
      this.$emit('cancel')
    },
    handleChange (e) {
      this.form.method = e
    },
    handleParentChange (e) {
      this.form.parentId = e
    },
    submit () {
      const status = this.form.status ? 0 : 1
      if (this.model === 0) {
        addRule({
          name: this.form.name,
          describe: this.form.describe,
          method: this.form.method,
          parentId: this.form.parentId,
          url: this.form.url,
          status: status
        }).then(res => {
          if (res.code === 200) {
            this.$message.success('添加成功')
            this.handelColse()
          } else {
            this.$message.error('添加失败')
          }
        })
      } else {
        settingRule({
          id: this.form.id,
          name: this.form.name,
          describe: this.form.describe,
          method: this.form.method,
          parentId: this.form.parentId,
          url: this.form.url,
          status: status
        }).then(res => {
          if (res.code === 200) {
            this.$message.success('修改成功')
            this.handelColse()
          } else {
            this.$message.error('修改失败')
          }
        })
      }
    }

  }
}
</script>
<style lang='less' scoped>
.form_item{
  display: flex;
  justify-content: left;
  align-items: center;
  min-height: 70px;
  .form_title{
    width: 70px;
  }
  .form_input{
    width: 60%;
  }
  .form_textarea{
    width: 80%;
    height: 60px;
    margin: 20px 0;
  }
}

/deep/.ant-select-selection-selected-value{
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 60%;
}

.dropdown-style{
  .ant-select-dropdown-menu {
    width: 400px;
    background: #1F1F26;
    border: solid 1px #32323a;
  }
  .ant-select-dropdown-menu-item {
    color: #fff !important;
  }
  .ant-select-dropdown-menu-item:hover {
    background: #32323a;
  }
  .ant-select-dropdown-menu-item-selected {
    background: #32323a;
  }
  .ant-select-dropdown-menu-item-active {
    background: #32323a;
  }
}
</style>
